<!doctype html>
<html>
    <head>
        <title>Update</title>
        {#HTML_HEADER}
    </head>
    <body>
        {#HTML_NAV}
        <div id="wrapper">
            <div id="content">
                <fieldset>
                    <legend class="des">{#SELECT_FILE} (*.bin)</legend>
                    <p>{#INSTALLED_VERSION}:<br/><span id="version" style="background-color: var(--input-bg); padding: 7px; display: block; margin: 3px;"></span></p>
                    <form id="form" method="POST" action="/update" enctype="multipart/form-data" accept-charset="utf-8">
                        <input type="file" id="uploadFileInput" name="update">
                        <input type="button" id="uploadButton" class="btn my-4" value="{#BTN_UPDATE}" onclick="hide()">
                    </form>
                </fieldset>
                <div class="row mt-4">
                    <a href="https://fw.ahoydtu.de" target="_blank">{#DOWNLOADS}</a>
                </div>
            </div>
        </div>
        {#HTML_FOOTER}
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', () => {
                const fileInput = document.querySelector('#uploadFileInput');
                const button = document.querySelector('#uploadButton');
                button.disabled = true;
                button.title = "Please select a file first";
                fileInput.addEventListener('change', () => {
                    if (fileInput.value) {
                        button.disabled = false;
                        button.title = "";
                    } else {
                        button.disabled = true;
                        button.title = "Please select a file first";
                    }
                });
            });

            var env;
            function parseGeneric(obj) {
                parseNav(obj)
                parseESP(obj)
                parseRssi(obj)
                parseTitle(obj)
                env = obj.env
                document.getElementById("version").innerHTML = "{#VERSION_FULL}_" + obj.env + ".bin"
            }

            function hide() {
                let fw = document.getElementsByName("update")[0].value
                var bin = fw.slice(-env.length-4, -4)
                let ver = fw.split("_")[2].split(".")
                if (bin !== env) {
                    var html = ml("div", {class: "row"}, [
                        ml("div", {class: "row my-3"}, "{#WARN_DIFF_ENV}"),
                        ml("div", {class: "row"}, [
                            ml("div", {class: "col-6"}, ml("input", {type: "button", class: "btn", value: "{#CANCEL}", onclick: function() { modalClose(); }}, null)),
                            ml("div", {class: "col-6"}, ml("input", {type: "button", class: "btn", value: "{#CONTIUE}", onclick: function() { start(); modalClose(); }}, null))
                        ])
                    ])
                    modal("{#UPDATE_MODAL}", html)
                } else {
                    if(ver[1] != "9")
                        start()
                    else {
                        var html = ml("div", {class: "row"}, [
                            ml("div", {class: "row my-3"}, "{#ERROR_UPGRADE_NOT_POSSIBLE}"),
                            ml("div", {class: "row"}, [
                                ml("div", {class: "col-6"}, ml("input", {type: "button", class: "btn", value: "{#CANCEL}", onclick: function() { modalClose(); }}, null))
                            ])
                        ])
                        modal("{#UPDATE_MODAL}", html)
                    }
                }

            }

            function start() {
                document.getElementById("form").submit()
                var e = document.getElementById("content")
                e.replaceChildren(span("{#UPDATE_STARTED}"))
            }

            getAjax("/api/generic", parseGeneric);
        </script>
    </body>
</html>
